<template>
  <div>
    <div v-if="programList != null && !homeFlag" class="nav_top"></div>

    <div v-if="homeFlag" class="home-content">
      <el-row :gutter="40" class="panel-group">
        <el-col :xs="24" :sm="12" :lg="5" class="card-panel-col">
          <div
            class="card-panel-description"
            style="display: flex; margin-top: 50px; margin-left: 20px"
          >
            <div class="card-panel-text font-style">账户名称：</div>
            {{ username }}
          </div>

          <div
            class="card-panel-description"
            style="display: flex; margin-top: 2px; margin-left: 20px"
          >
            <div class="card-panel-text font-style">浏览权限：</div>
            <span style="font-size: 20px; line-height: 18px">
              {{ level }}
            </span>

            <!-- <count-to
              :start-val="0"
              :end-val="level"
              :duration="2600"
              style="padding-top: 50px"
              class="card-panel-num"
            /> -->
          </div>
        </el-col>

        <el-col :xs="24" :sm="12" :lg="17" :offset="2" class="card-panel-col">
          <!-- <el-col :xs="5" :sm="4" :lg="5">
            <div class="card-panel-description" style="margin-top: 50px">
              <div class="card-panel-text font-style">浏览权限</div>
              <count-to
                :start-val="0"
                :end-val="level"
                :duration="2600"
                style="padding-top: 50px; font-size: 36px"
                class="card-panel-num"
              />
            </div>
          </el-col> -->
          <el-col :xs="5" :sm="12" :lg="5">
            <div class="card-panel-description" style="margin-top: 50px">
              <div class="card-panel-text font-style">权限剩余</div>
              <count-to
                :start-val="0"
                :end-val="day"
                :duration="3000"
                style="padding-top: 60px; font-size: 20px"
                class="card-panel-num"
              />
            </div>
          </el-col>

          <el-col :xs="14" :sm="12" :offset="2" :lg="6">
            <div class="card-panel-description" style="margin-top: 50px">
              <div style="text-align: left" class="card-panel-text">
                输入暗号获取权限
              </div>
              <el-form :model="demo">
                <el-form-item prop="title">
                  <md-input
                    v-model="demo.title"
                    icon="el-icon-search"
                    name="title"
                    placeholder="暗号"
                  >
                  </md-input>
                  <el-button class="submit-button" @click="handleSubmit"
                    >提交</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-col>
        </el-col>
      </el-row>
      <!--<el-row :gutter="40" style="margin-top: 50px">
            <el-col :xs="12" :sm="12" :lg="6">
              <el-card class="box-card">
                <div slot="header" class="clearfix" style="text-align: center">
                  <span class="font-style">关注后可获取暗号</span>
                </div>
                <div class="component-item">
                  <div class="qrcode"></div>
                </div>
              </el-card>
            </el-col>
          </el-row> -->
    </div>

    <directory v-if="!homeFlag && !picType" />

    <div>
      <el-row class="contont">
        <el-col :span="24" class="charts">
          <!-- 1 数据表 -->
          <matrix
            :title="kindName"
            :tableChoice="tableChoice"
            :dictionary="dictionary"
            v-if="picType == 1 && resultList.length != 0"
            ref="matrix"
          />
          <!-- 13 分页表 -->
          <pageTable
            :title="kindName"
            :tableChoice="tableChoice"
            v-if="picType == 13"
            ref="pageTable"
          />

          <!-- 2 柱状图 -->
          <bar
            v-if="picType == 2"
            :unit="theUnit"
            :title="kindName"
            ref="bar"
          />

          <!-- 3 折线图 -->
          <histogram
            :unit="theUnit"
            :echartsData="resultList"
            :title="kindName"
            v-if="picType == 3 && resultList.length != 0"
            ref="histogram"
          />

          <!-- 4 点状地图 -->
          <!-- <baiduMap
            ref="baiduMap"
            :key="1"
            :mapData="resultList"
            :mapSize="mapSize"
            v-if="picType == 4 && resultList.length != 0"
          /> -->
          <echartsPoint
            ref="baiduMap"
            :key="1"
            :mapData="resultList"
            :mapSize="mapSize"
            :center="center"
            :proportion="proportion"
            :remarks="remarks"
            :parameter="parameter"
            v-if="picType == 4 && resultList.length != 0"
          />

          <!-- 5 涂色地图-->
          <baiduMap
            ref="baiduMap"
            :key="1"
            :mapData="resultList"
            :unit="theUnit"
            :mapSize="mapSize"
            :center="center"
            :proportion="proportion"
            v-if="picType == 5 && resultList.length != 0"
          />

          <!-- 7 价差图 -->
          <brokenline
            :unit="theUnit"
            v-if="picType == 7 && kindName"
            ref="brokenline"
            :title="kindName"
            :tableChoice="tableChoice"
          ></brokenline>

          <!-- 11 占比条形图 -->
          <linepicture
            :unit="theUnit"
            :remarks="remarks"
            v-if="picType == 11 && kindName"
            ref="linepicture"
            :title="kindName"
            :tableChoice="tableChoice"
          ></linepicture>

          <!-- 12 折线柱状组合 -->
          <BarHistogram
            :unit="theUnit"
            :echartsData="resultList"
            :title="kindName"
            :universal="universal"
            v-if="picType == 12 && resultList.length != 0"
            ref="barHistogram"
          />
          <!-- K线图 -->
          <KChart
            :unit="theUnit"
            :echartsData="resultList"
            :title="kindName"
            :universal="universal"
            v-if="picType == 14 && resultList.length != 0"
            ref="KChart"
          />

          <!-- 15-玉米供需矩形树状图 -->
          <TreeChart
            :unit="theUnit"
            :tableChoice="tableChoice"
            :echartsData="resultList"
            :title="kindName"
            :universal="universal"
            v-if="picType == 15 && resultList.length != 0"
            ref="TreeChart"
          />

          <!-- 房屋出租图 -->
          <HouseChart
            :unit="theUnit"
            :tableChoice="tableChoice"
            :echartsData="resultList"
            :title="kindName"
            :universal="universal"
            v-if="picType == 16 && resultList.length != 0"
            ref="HouseChart"
          />

          <!-- 8 立体柱状图 -->
        </el-col>
      </el-row>
    </div>
    <div
      style="font-size: 0.35rem; padding: 0.8125rem 0.5125rem; width: 50vw"
      v-if="dataMap == null && programList == null"
    ></div>
  </div>
</template>

<script>
import histogram from "@/view/compents/graphic/histogram.vue";
import brokenline from "@/view/compents/graphic/brokenline.vue";
import dataTable from "@/view/compents/graphic/table";
import bar from "@/view/compents/graphic/bar.vue";
import CountTo from "vue-count-to";
import MdInput from "@/components/MDinput";
import PanThumb from "@/components/PanThumb";
import matrix from "@/view/compents/graphic/matrix.vue";
import pageTable from "@/view/compents/graphic/pageTable.vue";
import baiduMap from "@/view/compents/graphic/baiduMap.vue";
import baiduMapV from "@/view/compents/graphic/baiduMapV.vue";
import echartsPoint from "@/view/compents/graphic/echartsPoint.vue";
import linepicture from "@/view/compents/graphic/linePicture1.vue";
import directory from "@/view/compents/graphic/directory.vue";
import BarHistogram from "@/view/compents/graphic/BarHistogram.vue";
import KChart from "@/view/compents/graphic/KChart2.vue";
import TreeChart from "@/view/compents/graphic/TreeChart.vue";
import HouseChart from "@/view/compents/graphic/HouseChart.vue";
import { getData, threeQueryDetail } from "@/api/table.js";
import { activationCode, getVipInfo } from "@/api/user.js";
import NProgress from "nprogress"; // progress bar
import "nprogress/nprogress.css"; // progress bar style
NProgress.configure({ showSpinner: false }); // NProgress Configuration
export default {
  components: {
    histogram,
    brokenline,
    linepicture,
    dataTable,
    matrix,
    baiduMap,
    baiduMapV,
    echartsPoint,
    CountTo,
    bar,
    MdInput,
    PanThumb,
    BarHistogram,
    KChart,
    TreeChart,
    HouseChart,
    directory,
    pageTable,
  },

  data() {
    const validate = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error("请输入六个字符"));
      } else {
        callback();
      }
    };
    return {
      homeFlag: false,
      center: "",
      proportion: "",
      remarks: "",
      parameter: "",
      resultList: [],
      mapSize: 0,
      demo: {
        title: "",
      },
      universal: "",
      locationLng: "",
      locationLat: "",
      loading: false,
      props: { multiple: true },
      programList: [],
      kindId: null,
      programId: "",
      dataMap: null,
      title: null,
      kindName: null,
      detailParams: {},
      tableChoice: "",
      dictionary: "",
      picType: "",
      screenValue: null,
      day: 0,
      level: 0,
      username: "",
    };
  },

  created() {
    console.log("charts_nav");
    this.username = localStorage.getItem("name");
    if (!localStorage.getItem("token")) {
      this.$router.replace({
        path: "/login",
      });
    }
    this.getVipInfo();

    if (this.picType != 13) {
      this.getProgramList();
    }
  },

  mounted() {},

  computed: {
    isFollow() {
      return this.$route.query;
    },
  },

  watch: {
    isFollow: {
      handler(newVal, oldVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
        let length = Object.keys(newVal).length;
        console.log(length, length);
        if (newVal.page == "home" || length == 0) {
          this.homeFlag = true;
          this.loading = false;
          NProgress.done();
        } else {
          this.homeFlag = false;
        }
      },
      immediate: true,
      deep: true,
    },

    $route(to, from) {
      console.log("aaa", to, from);

      this.resultList = [];
      this.programList = null;
      this.loading = true;
      NProgress.start();
      this.dataMap = null;
      this.dataMap1 = null;
      this.kindName = null;
      this.picType = "";
      this.title = null;
      this.screenValue = null;
      this.area1 = "";
      this.area2 = "";
      this.kindId = "";

      if (to.query.kindId || to.query.programId) {
        this.kindId = to.query.kindId;
        this.programId = localStorage.getItem("kindName");
        this.kindName = localStorage.getItem("kindName");
        this.picType = localStorage.getItem("picType");
        console.log("this.picType", this.picType);
        if (this.picType != 13) {
          console.log(111);
          this.getProgramList();
        }
        this.tableChoice = localStorage.getItem("tableChoice");
        this.theUnit = localStorage.getItem("theUnit");
        this.universal = localStorage.getItem("universal");
        let locationLat = localStorage.getItem("locationLat");
        let locationLng = localStorage.getItem("locationLng");
        this.center = { lng: locationLng, lat: locationLat };
        this.proportion = Number(localStorage.getItem("proportion"));
        this.remarks = Number(localStorage.getItem("remarks"));
        console.log("this.remarks2", this.remarks);

        console.log("this.universal", this.universal);
        this.mapSize = Number(localStorage.getItem("mapSize"));
        if (this.kindId || this.programId) {
          this.dataMap = null;
          this.dataMap1 = null;
        }
      }
    },
    deep: true,
    immediate: true,
  },

  methods: {
    async handleSubmit() {
      let res = await activationCode(this.demo.title);
      if (res.data.code == 200) {
        this.getVipInfo();
        this.$message.success(res.data.message);
      } else {
        this.$message.error(res.data.message);
      }
    },
    async getVipInfo() {
      let res = await getVipInfo();
      if (res.data.code == 200) {
        this.day = res.data.result.day;
        this.level = res.data.result.level;
      }
    },
    async getProgramList() {
      if (!this.kindId && !this.$route.query.kindId) {
        return;
      }
      let res = await getData(
        this.kindId || this.$route.query.kindId,
        this.kindName || localStorage.getItem("kindName"),
        1
      );

      let res1 = await threeQueryDetail(
        this.kindId || this.$route.query.kindId
      );

      if (res.data.code == 200 && res1.data.code == 200) {
        this.resultList = res.data.result;
        this.detailParams = res1.data.result;
        this.picType = this.detailParams.picType;
        this.tableChoice = this.detailParams.tableChoice;
        this.programId = this.detailParams.programId;
        this.kindName = this.detailParams.name;
        console.log("kindName", this.kindName);
        this.theUnit = this.detailParams.theUnit;
        console.log("theUnit", this.theUnit);
        this.universal = this.detailParams.universal;
        this.locationLat = this.detailParams.locationLat;
        this.locationLng = this.detailParams.locationLng;
        this.remarks = this.detailParams.remarks;
        this.parameter = this.detailParams.parameter;
        this.dictionary = this.detailParams.dictionary;
        localStorage.setItem("remarks", this.detailParams.remarks);
        localStorage.setItem("parameter", this.detailParams.parameter);
        this.center = { lng: this.locationLng, lat: this.locationLat };

        this.getDataList();
      } else {
        this.$message.error(res.data.message);
      }
    },
    // 获取图表数据
    async getDataList() {
      if (this.picType == 7) {
        this.$nextTick(() => {
          this.$refs.brokenline.drawLine(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }

      if (this.picType == 11) {
        this.$nextTick(() => {
          this.$refs.linepicture.drawLine(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }

      if (this.picType == 12) {
        this.$nextTick(() => {
          this.$refs.barHistogram.drawLine(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }
      if (this.picType == 14) {
        this.$nextTick(() => {
          this.$refs.KChart.drawLine(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }
      if (this.picType == 15) {
        this.$nextTick(() => {
          this.$refs.TreeChart.getData(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }

      if (this.picType == 16) {
        this.$nextTick(() => {
          this.$refs.HouseChart.getData(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }

      if (this.picType == 1) {
        this.$nextTick(() => {
          console.log("this.$refs.matrix", this.$refs.matrix);
          this.$refs.matrix.getData(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }

      if (this.picType == 5) {
        this.$nextTick(() => {
          this.$refs.baiduMap.getData(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }
      if (this.picType == 4) {
        this.$nextTick(() => {
          this.$refs.baiduMap.getData(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }

      if (this.picType == 2) {
        this.$nextTick(() => {
          this.$refs.bar.getData(this.resultList);
          this.loading = false;
          NProgress.done();
        });
      }
      if (this.picType == 3) {
        this.loading = false;
        NProgress.done();
      }
    },

    handleSetLineChartData(type) {
      this.$emit("handleSetLineChartData", type);
    },

    //下载excel
    async handleExportXls(fileName) {
      if (!fileName || typeof fileName !== "string") {
        fileName = this.title;
      }
      let param = {};
      let params = {
        kindId: this.kindId,
        param: param,
        programId: this.programId,
        type: 2,
        title: this.title,
      };

      await this.$http.postBlob(this.url.exportXlsUrl, params).then((data) => {
        if (!data) {
          this.$message.warning("文件下载失败");
          return;
        }
        if (typeof window.navigator.msSaveBlob !== "undefined") {
          window.navigator.msSaveBlob(
            new Blob([data], {
              type: "application/vnd.ms-excel;charset=utf-8",
            }),
            fileName + ".xls"
          );
        } else {
          let url = window.URL.createObjectURL(
            new Blob([data], { type: "application/vnd.ms-excel;charset=utf-8" })
          );
          let link = document.createElement("a");
          link.style.display = "none";
          link.href = url;
          link.setAttribute("download", fileName + ".xls");
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link); // 下载完成移除元素
          window.URL.revokeObjectURL(url); // 释放掉blob对象
        }
      });
    },

    // 图表转化成图片并下载的方法
    es_charts() {
      let base_64 = document
        .getElementById("main")
        .getElementsByTagName("canvas")[0];
      let width = base_64.width;
      let height = base_64.height;
      let ctx = base_64.getContext("2d");
      ctx.drawImage(base_64, width, height);
      let url = base_64.toDataURL();
      let aLink = document.createElement("a");
      let evt = document.createEvent("HTMLEvents");
      aLink.download = new Date().getTime();
      aLink.href = url;
      aLink.click();
    },
  },
};
</script>

<style lang="scss">
.submit-button {
  height: 30px;
  line-height: 6px;
  position: absolute;
  right: -4px;
  top: 42px;
}

.nav_top {
  .el-tabs--border-card > .el-tabs__content {
    padding: 5px;
  }
}

.home-content {
  padding-top: 40px;
  padding-left: 10px;
  padding-right: 10px;
  min-height: 100vh;
  text-align: center;
  background-color: #f6f7f8;
}

.font-style {
  color: #000 !important;
  font-weight: normal !important;
  font-size: 16px !important;
  margin-bottom: 50px !important;
}
.component-item {
  position: relative;
  min-height: 100px;
}
.panel-group {
  margin-top: 18px;

  .card-panel-col {
    margin-left: 20px;
    margin-bottom: 32px;
    height: 200px;
    border-radius: 8px;
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
    // line-height: 300px;
    background-color: #fff !important;
  }

  .card-panel {
    height: 108px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
    // position: relative;
    overflow: hidden;
    color: #666;
    background: #fff;
    box-shadow: 4px 4px 40px rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.05);

    &:hover {
      .card-panel-icon-wrapper {
        color: #fff;
      }

      .icon-people {
        background: #40c9c6;
      }

      .icon-message {
        background: #36a3f7;
      }

      .icon-money {
        background: #f4516c;
      }

      .icon-shopping {
        background: #34bfa3;
      }
    }

    .icon-people {
      color: #40c9c6;
    }

    .icon-message {
      color: #36a3f7;
    }

    .icon-money {
      color: #f4516c;
    }

    .icon-shopping {
      color: #34bfa3;
    }

    .card-panel-icon-wrapper {
      float: left;
      margin: 14px 0 0 14px;
      padding: 16px;
      transition: all 0.38s ease-out;
      border-radius: 6px;
    }

    .card-panel-icon {
      float: left;
      font-size: 48px;
    }

    .card-panel-description {
      border-radius: 20;
      display: flex !important;
      background-color: #fff !important;
      justify-content: space-between;
      font-weight: bold;
      margin: 26px;
      margin: auto;
      padding-top: 14px;

      .card-panel-text {
        flex: 1;
        line-height: 18px;
        color: rgba(0, 0, 0, 0.45);
        font-size: 16px;
        margin-bottom: 12px;
      }

      .card-panel-num {
        margin-top: 30px;
        flex: 1;
        font-size: 36px !important;
        font-weight: normal !important;
      }
    }
  }
}

@media (max-width: 550px) {
  // .card-panel-description {
  //   display: none;
  // }

  .card-panel-icon-wrapper {
    float: none !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;

    .svg-icon {
      display: block;
      margin: 14px auto !important;
      float: none !important;
    }
  }
}
a {
  text-decoration: none;
  color: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  -webkit-text-size-adjust: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  border-bottom: none;
  width: 100%;
}

.bm-view {
  width: 100%;
  height: 800px;
}

.blank {
  width: 100%;
  padding-top: 4vh;
  margin-top: 2vh;
  padding-left: 2%;
  font-size: 14px;
  border-radius: 7px;
}
.charts {
  background-color: #ffffff;
  margin-top: 1vh;
  border-radius: 7px;
  // padding-bottom: 1vh;
}

.qrcode {
  // position: absolute;
  // top: 0px;
  margin: 0 auto;
  width: 100px;
  height: 100px;
  background: url("~@/assets/qrcode.png");
  background-size: 100% 100%;
}

.contont {
  // margin-top: 24px;
  width: 100%;
  overflow: hidden;

  .el-tag {
    background-color: #ecf5ff;
    border-color: #d9ecff;
    display: inline-block;
    height: 32px;
    padding: 0 10px;
    line-height: 30px;
    font-size: 14px;
    color: #409eff;
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
  }
  .areadropdown {
    width: 150%;
    margin-left: 5%;
    line-height: 3.4vh;
    text-align: center;
    background-color: #e9e9e9 !important;

    input {
      height: 3.4vh !important;
      font-size: 14px;
      border-radius: 4px;
      line-height: 3.4vh;
      text-align: center;
    }
  }
  .dropdown {
    width: 100%;
    margin-left: 5%;
    line-height: 38px;
    text-align: center;
    background-color: #e9e9e9 !important;

    input {
      height: 38px;
      font-size: 14px;
      line-height: 38px;
      text-align: center;
    }
  }

  .dropdown1 {
    line-height: 38px;
    text-align: center;
    background-color: #e9e9e9 !important;
    input {
      height: 38px;
      font-size: 14px;
      line-height: 38px;
      text-align: center;
    }
  }

  .el-range-editor--small .el-range-separator {
    line-height: 38px;
    font-size: 16px;
  }

  .conditions {
    .condition_button {
      width: 100%;
      height: 0.625rem;
      color: #fff;
      border-radius: 8px;
      background: #1d6ed7;
    }
    .datePicker1 {
      width: 150%;
      height: 38px;

      input {
        line-height: 38px;
        font-size: 15px;
        text-align: center;
      }
    }
  }

  .datePicker {
    width: 150%;
    height: 38px;

    input {
      line-height: 10vh;
      font-size: 15px;
      text-align: center;
    }
  }

  .spans {
    display: inline-block;
    width: 80%;
    text-align: center;
    height: 38px;
    line-height: 38px;
    margin-left: 14vh;
    background-color: #ffffff;
    color: #8c8c8c;

    .el-icon-picture {
      color: #196dff;
      margin-right: 5px;
    }

    .el-icon-s-marketing {
      color: #207245;
      margin-right: 5px;
    }
  }
}
</style>
